<template>
  <div class="login">
    <img class="loginBg" src="../assets/loginbg.png">
    <yd-flexbox class="loginCon">
      <div class="spaceWidth"></div>
      <yd-flexbox-item>
        <div class="title">亚都水机</div>
        <yd-cell-group class="inputGroup">
            <yd-cell-item class="inputItem firstInput">
                <span slot="left"><i class="yadu-icon-geren"></i></span>
                <yd-input slot="right" ref="phone" v-model="loginInfo.phone" required regex="mobile" placeholder="请输入手机号码"></yd-input>
            </yd-cell-item>

            <yd-cell-item class="inputItem">
                <span slot="left"><i class="yadu-icon-mima"></i></span>
                <yd-input slot="right" type="password" ref="password" min="8" required v-model="loginInfo.password" placeholder="请输入密码"></yd-input>
            </yd-cell-item>
        </yd-cell-group>
        <yd-flexbox class="btns">
            <div>
              <yd-checkbox-group class="rememberPW" v-model="rememberPassword" size="12" color="#fff">
                  <yd-checkbox val="1" shape="circle"><span class="checkText">记住密码</span></yd-checkbox>
              </yd-checkbox-group>
            </div>
            <yd-flexbox-item></yd-flexbox-item>
            <div class="rightBtn">
              <router-link to="/forgetpw" class="forgetPW">忘记密码</router-link>
              <router-link to="/register" class="register">注册</router-link>
            </div>
        </yd-flexbox>
        <yd-button class="loginBtn" size="large" type="primary" shape="circle" @click.native="login">登录</yd-button>
      </yd-flexbox-item>
      <div class="spaceWidth"></div>
    </yd-flexbox>
  </div>
</template>

<script>
// import util from "../libs/util";
import URL from "../until/urlConfig.js";
import until from "../until/until.js";
import md5 from 'js-md5';
export default {
  data() {
    return {
      rememberPassword:[],
      //登录数据结构
      loginInfo: {
        phone: "",
        password: "",
      }
    };
  },
  methods: {
    isRemember(){
      if(!localStorage.getItem('ydinfo')){
        return;
      }
      var info = JSON.parse(localStorage.getItem('ydinfo'));
      if(info.isremember=='1'){
        this.rememberPassword = ['1'];
        this.loginInfo.password = info.password;
        this.loginInfo.phone = info.phone;
      }else{
        this.rememberPassword = [];
      }
    },
    login(){
      // console.log(this.rememberPassword);
      const phone = this.$refs.phone;
      if(!phone.valid){
        this.$dialog.toast({
            mes: '请输入正确手机号',
            timeout: 1500
        });
        return;
      }
      const password = this.$refs.password;
      if(!password.valid){
        this.$dialog.toast({
            mes: '请输入密码',
            timeout: 1500
        });
        return;
      }
      var isRemember = '0';
      if(this.rememberPassword.length>0){
        isRemember = '1';
      }
      this.$http.post(URL.login,JSON.stringify({
        phone:this.loginInfo.phone,
        type:'front',
        password:md5(this.loginInfo.password),
        isRemember:isRemember
      }))
      .then(res=>{
        localStorage.setItem('ydtoken',res.data[0]||'');
        localStorage.setItem('ydinfo',JSON.stringify({isremember:isRemember,phone:this.loginInfo.phone,password:this.loginInfo.password}));
        this.$router.push('/index')
      })
    }
  },
  computed: {
    osName() {
      return this.$store.state.osName;
    }
  },
  created() {
    this.isRemember();
  },
  mounted() {
    // this.initUserInfo();
  }
};
</script>
<style lang="scss">
@import "../style/public.scss";
.login {
  height:100%;
  position:relative;
  font-size:0;
  .loginBg{
    width:100%;
    height:100%;
  }
  .loginCon{
    position:absolute;
    width:100%;
    top:rem(228);
    .spaceWidth{
      width:rem(76);
    }
    .title{
      font-size:rem(62);
      color:#fff;
      margin-bottom:rem(206);
    }
    .inputGroup{
      .yd-cell{
        background:rgba(0,0,0,0);
        &:after{
          height:0;
        }
        .inputItem{
          background:rgba(255,255,255,.3);
          color:#fff;
          height:rem(80);
          border-radius:rem(40);
          border:rem(2) solid #fff;
          line-height:rem(82);
          padding-left:rem(32);
          .yd-cell-item:not(:last-child):after{
            height:0;
          }
          &.firstInput{
            margin-bottom:rem(50);
          }
          input::-webkit-input-placeholder {
            color: #fff;
            font-size:rem(28);
          }
          input{
            color:#fff;
          }
          .yd-cell-left{
            margin-right:rem(18);
            span{
              height:rem(80);
              line-height:rem(82);
            }
          }
          .yadu-icon-geren{
            color:#fff;
            font-size:rem(36);
          }
          .yadu-icon-mima{
            color:#fff;
            font-size:rem(36);
          }
        }
      }
    }
    .btns{
      .rememberPW{
        height:rem(20);
        line-height:rem(20);
        .yd-checkbox>input[type=checkbox] {
            position: absolute;
            left: -9999rem;
        }
        .yd-checkbox-icon>i{
          border: rem(4) solid #4cd864;
          border-top: 0;
          border-left: 0;
        }
        .yd-checkbox-icon{
          border-color:#fff;
          vertical-align:top;
          margin-right:rem(8);
        }
        .checkText{
          font-size:rem(20);
          color:#fff;
        }
      }
      .rightBtn{
        .forgetPW{
          color:#fff;
          font-size:rem(20);
          margin-right:rem(10);
        }
        .register{
          color:#fff;
          font-size:rem(20);
        }
      }
    }
    .loginBtn{
      margin-top:rem(78);
      background:rgba(255,255,255,.7);
      color:$defaultcolor;
      font-size:rem(40);
      height:rem(90);
      line-height:rem(90);
      font-family:'Segoe UI';
      font-weight:100;
    }
  }
}
</style>